<template>
  <hry-header title="修改登录密码" :showBackBtn="true">
    <div slot="content" class="login form-wrapper">
      <form novalidate @submit.prevent="validateBeforeSubmit">
        <md-field>
          <input-validate
            v-model="formData.oldPassword"
            placeholder="输入您的旧密码"
            type="password"
            icon="iconmima"
            name="oldpassword"
            v-validate="'required'"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="您的旧密码"
            :error="errors.first('oldpassword')"
          >
          </input-validate>
          <input-validate
            v-model="formData.password"
            placeholder="输入您的密码"
            type="password"
            icon="iconzhongzhi3"
            name="password"
            v-validate="'required|newPad'"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="您的密码"
            :error="errors.first('password')"
          >
          </input-validate>
          <input-validate
            placeholder="输入确认密码"
            v-model="formData.confirm"
            type="password"
            icon="iconmima"
            name="confirm"
            v-validate="{ required: 'true', is: formData.password }"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="确认密码"
            :error="errors.first('confirm')"
          >
          </input-validate>
        </md-field>
        <a-button type="primary" block html-type="submit">确认</a-button>
      </form>
    </div>
  </hry-header>
</template>

<script>
import { Field } from "mand-mobile";
import "@/assets/fonticon/iconfont.css";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.newPassword("newPad", "新密码由6-20位 数字+字母 组成");

export default {
  name: "index",
  components: {
    inputValidate,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Field.name]: Field
  },
  data() {
    return {
      formData: {
        oldPassword: "",
        confirm: "",
        password: ""
      }
    };
  },
  methods: {
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          let obj = {
            oldpass: this.formData.oldPassword,
            newpass: this.formData.password
          };
          this.$ajax
            .post(this.$api.logPass, obj)
            .then(() => {
              this.$message.success("修改登录密码成功,请重新登录！");
              this.$commonJs.logout("login");
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.form-wrapper {
  margin: 39px 63px;
  .link {
    font-size: 25px;
  }
  .ant-btn {
    margin-top: 117px;
    height: 75px;
    font-size: 30px;
  }
  .iconfont {
    .linear_gradient_back(#fad683, #f8962d, #ef8028);
    font-size: 36px;
    -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
    -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
  }
}
</style>
